<template>
  <div class="login-toggle">
    <jc-icon class="change-icon" name="take-class" />
    <div
      :class="[
        'marsk',
        {
          dark: isDark,
          light: !isDark
        }
      ]"
    >
      <div class="toggle-tips">{{ props.at === 'scan' ? '密码登陆' : '扫一扫登陆' }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { AuthViewType } from './types'

const props = defineProps<{
  at: AuthViewType
  isDark: boolean
}>()
</script>

<style lang="scss" scoped>
.login-toggle {
  position: relative;
  cursor: pointer;
  .change-icon {
    position: absolute;
    right: 0;
    top: -19px;

    font-size: 60px;
  }

  .marsk {
    position: absolute;
    right: 9px;
    top: -15px;
    width: 0;
    height: 0;
    border: 26px solid;
    &.dark {
      border-color: transparent transparent #181818 #181818;
    }
    &.light {
      border-color: transparent transparent #fff #fff;
    }

    &:hover {
      .toggle-tips {
        display: inline-block;
      }
    }
    .toggle-tips {
      position: relative;
      display: none;
      background-color: rgb(219, 123, 123);
      color: aliceblue;
      font-size: small;
      white-space: nowrap;
      top: -46px;
      left: -96px;
      padding: 4px 6px 4px 6px;
      border-radius: 3px;
    }
  }
}
</style>
